<template>
 
<CommonCard  title="今日销售额" :value="(numberFormat(salesToday) as string)">

<template #default>
  <div class="compare">
    <div class="emphasis">日相比 &nbsp;{{ salesGrowthLastDay }} %<span class="decrement"></span></div>
  <div class="emphasis" > 月相比 &nbsp; {{ salesGrowthLastMonth }}%<span class="increment"></span></div>
  </div>
</template>


<template #footer>

  <div class="footer-left">昨日销售额<span class="emphasis"> {{ moneyFormat(salesLastDay) }}</span></div>


</template>

</CommonCard>


</template>

<script lang="ts">
  export default {
     name:'TodaySales'
  }
</script>
<script lang="ts" setup>
import {
  computed
} from "vue"
import CommonCard from "./commonCard.vue"
import { useReportDataStore } from "@/stores/reportData"
import useFormat from "@/hooks/useFrmat"
const { numberFormat, moneyFormat } = useFormat()
const useReport = useReportDataStore()

//今日销售额
const salesToday = computed(() => useReport.reportInfo.salesToday)
//昨日销售额
const salesLastDay = computed(() => useReport.reportInfo.salesLastDay)
//日同比
const salesGrowthLastDay = computed(() => useReport.reportInfo.salesGrowthLastDay)
//月同比
const salesGrowthLastMonth=computed(()=>useReport.reportInfo.salesGrowthLastMonth)

</script>

<style lang="scss" scoped>
.compare {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  >div {
    display: flex;
    align-items: center;
  }
}

</style>